<template>
  <div class="van-dialog" style="z-index: 10">
    <div class="van-dialog__content">
      <div class="van-dialog__message">{{text}}</div>
  </div>
</div>
</template>

<script>
export default {
  name: 'diaLog',
  props: {
    text: {
      type: String,
      default: '提示框'
    }
  }
}
</script>

<style scoped>
.van-dialog {
    position: fixed;
    top: 45%;
    left: 50%;
    width: 30%;
    overflow: hidden;
    font-size: 16px;
    background-color: rgba(0,0,0,.8);
    border-radius: 4px;
    -webkit-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: .3s;
    transition: .3s;
    -webkit-transition-property: opacity,-webkit-transform;
    transition-property: opacity,-webkit-transform;
    transition-property: transform,opacity;
    transition-property: transform,opacity,-webkit-transform;
}

.van-dialog__message {
    max-height: 60vh;
    padding: 24px;
    overflow-y: auto;
    font-size: 14px;
    line-height: 20px;
    white-space: pre-wrap;
    text-align: center;
    word-wrap: break-word;
    -webkit-overflow-scrolling: touch;
    color: white;
}
</style>
